<template>
  <div class="search-bar" @click="ClicktoSearch">
    <div class="left">
      <div class="start">
        <span class="tip">住</span>
        <span class="time">{{ startDate }}</span>
      </div>
      <div class="end">
        <span class="tip">离</span>
        <span class="time">{{ endDate }}</span>
      </div>
    </div>
    <div class="content">
      <div class="keyword">关键词/位置/民宿名</div>
    </div>
    <div class="right">
      <van-icon name="search" size="20" />
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { formatMD } from "../../utils/format_date";
import { storeToRefs } from "pinia";
import useMainStore from "../../stores/modules/mainStore";
import { useRouter } from "vue-router";
import usecityStore from "../../stores/modules/cityStore";

const router = useRouter();
// 获取城市
const cityStore = usecityStore();
const { currentCity } = storeToRefs(cityStore);
// 获取日期
const mainStore = useMainStore();
const { nowDate, futureDate } = storeToRefs(mainStore);
const startDate = computed(() => formatMD(nowDate.value, "MM.DD"));
const endDate = computed(() => formatMD(futureDate.value, "MM.DD"));

// 跳转到搜索详情页
const ClicktoSearch = () => {
  router.push({
    path: "/search",
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.value.cityName,
    },
  });
};
</script>

<style lang="less" scoped>
.search-bar {
  height: 45px;
  line-height: 45px;
  background-color: #fff;
  border-radius: 15px;
  display: flex;
  align-content: space-between;
  .left {
    border-right: 1px solid #fff;
    width: 15%;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    padding-left: 8px;
    .start,
    .end {
      font-size: 10px;
      line-height: 1;
      margin: 2px 0;
      .tip {
        color: #aaaaaa;
        margin-right: 4px;
      }
    }
  }
  .content {
    color: #aaaaaa;
    font-size: 14px;
    padding-left: 6px;
    flex: 1;
  }
  .right {
    margin-right: 15px;
  }
}
</style>
